<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="google-site-verification" content="xBT4GhYoi5qRD5tr338pgPM5OWHHIDR6mNg1a3euekI" />
    <meta name="baidu-site-verification" content="093lY4ziMu" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="记录生活，记录知识">
    <meta name="keyword"  content="javascript, frontEnd">
    <link rel="shortcut icon" href="/img/header.jpg ">
    <!-- Place this tag in your head or just before your close body tag. -->
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <!--<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>-->
    <title>
        
          Hexo-Theme-Snail - xiaopf
        
    </title>

    <link rel="canonical" href="https://xiaopf.github.io/2019/11/01/Hexo-Theme-Snail/">

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <!-- Custom CSS --> 
    <link rel="stylesheet" href="/css/xiaopf.css">
    <!-- background effects end -->
    
    <!-- Pygments Highlight CSS -->
    <link rel="stylesheet" href="/css/highlight.css">

    <link rel="stylesheet" href="/css/widget.css">

    <link rel="stylesheet" href="/css/rocket.css">

    <link rel="stylesheet" href="/css/signature.css">

    <link rel="stylesheet" href="/css/toc.css">

    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/fonts.googleapis.css">

    <!-- Custom Fonts -->
    <!-- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
    <!-- Hux change font-awesome CDN to qiniu -->
    <!--<link href="https://cdn.staticfile.org/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> -->

    <link rel="stylesheet" href="/css/font-awesome.css">

    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">

    <!-- Hux Delete, sad but pending in China
    <link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/
    css'>
    -->


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- ga & ba script hoook -->
    <script></script>
</head>


<!-- hack iOS CSS :active style -->
<body ontouchstart="">

    
        <!-- background effects start -->
        <!-- show star -->
        <canvas id="canv" width="1440" height="768"></canvas>
<script>
  var num = 200;
  var w = window.innerWidth;
  var h = window.innerHeight;
  var max = 100;
  var _x = 0;
  var _y = 0;
  var _z = 150;
  var dtr = function(d) {
    return d * Math.PI / 180;
  };

  var rnd = function() {
    return Math.sin(Math.floor(Math.random() * 360) * Math.PI / 180);
  };
  var dist = function(p1, p2, p3) {
    return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + Math.pow(p2.z - p1.z, 2));
  };

  var cam = {
    obj: {
      x: _x,
      y: _y,
      z: _z
    },
    dest: {
      x: 0,
      y: 0,
      z: 1
    },
    dist: {
      x: 0,
      y: 0,
      z: 200
    },
    ang: {
      cplane: 0,
      splane: 0,
      ctheta: 0,
      stheta: 0
    },
    zoom: 1,
    disp: {
      x: w / 2,
      y: h / 2,
      z: 0
    },
    upd: function() {
      cam.dist.x = cam.dest.x - cam.obj.x;
      cam.dist.y = cam.dest.y - cam.obj.y;
      cam.dist.z = cam.dest.z - cam.obj.z;
      cam.ang.cplane = -cam.dist.z / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
      cam.ang.splane = cam.dist.x / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
      cam.ang.ctheta = Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z) / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
      cam.ang.stheta = -cam.dist.y / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
    }
  };

  var trans = {
    parts: {
      sz: function(p, sz) {
        return {
          x: p.x * sz.x,
          y: p.y * sz.y,
          z: p.z * sz.z
        };
      },
      rot: {
        x: function(p, rot) {
          return {
            x: p.x,
            y: p.y * Math.cos(dtr(rot.x)) - p.z * Math.sin(dtr(rot.x)),
            z: p.y * Math.sin(dtr(rot.x)) + p.z * Math.cos(dtr(rot.x))
          };
        },
        y: function(p, rot) {
          return {
            x: p.x * Math.cos(dtr(rot.y)) + p.z * Math.sin(dtr(rot.y)),
            y: p.y,
            z: -p.x * Math.sin(dtr(rot.y)) + p.z * Math.cos(dtr(rot.y))
          };
        },
        z: function(p, rot) {
          return {
            x: p.x * Math.cos(dtr(rot.z)) - p.y * Math.sin(dtr(rot.z)),
            y: p.x * Math.sin(dtr(rot.z)) + p.y * Math.cos(dtr(rot.z)),
            z: p.z
          };
        }
      },
      pos: function(p, pos) {
        return {
          x: p.x + pos.x,
          y: p.y + pos.y,
          z: p.z + pos.z
        };
      }
    },
    pov: {
      plane: function(p) {
        return {
          x: p.x * cam.ang.cplane + p.z * cam.ang.splane,
          y: p.y,
          z: p.x * -cam.ang.splane + p.z * cam.ang.cplane
        };
      },
      theta: function(p) {
        return {
          x: p.x,
          y: p.y * cam.ang.ctheta - p.z * cam.ang.stheta,
          z: p.y * cam.ang.stheta + p.z * cam.ang.ctheta
        };
      },
      set: function(p) {
        return {
          x: p.x - cam.obj.x,
          y: p.y - cam.obj.y,
          z: p.z - cam.obj.z
        };
      }
    },
    persp: function(p) {
      return {
        x: p.x * cam.dist.z / p.z * cam.zoom,
        y: p.y * cam.dist.z / p.z * cam.zoom,
        z: p.z * cam.zoom,
        p: cam.dist.z / p.z
      };
    },
    disp: function(p, disp) {
      return {
        x: p.x + disp.x,
        y: -p.y + disp.y,
        z: p.z + disp.z,
        p: p.p
      };
    },
    steps: function(_obj_, sz, rot, pos, disp) {
      var _args = trans.parts.sz(_obj_, sz);
      _args = trans.parts.rot.x(_args, rot);
      _args = trans.parts.rot.y(_args, rot);
      _args = trans.parts.rot.z(_args, rot);
      _args = trans.parts.pos(_args, pos);
      _args = trans.pov.plane(_args);
      _args = trans.pov.theta(_args);
      _args = trans.pov.set(_args);
      _args = trans.persp(_args);
      _args = trans.disp(_args, disp);
      return _args;
    }
  };
  const canvasObj = document.getElementById("canv");
  (function() {
    "use strict";
    // 移动端不开启悬浮的星星
    const UA = window.navigator.userAgent;
    if(UA.indexOf('Android') >= 0 || UA.indexOf('iPhone') >= 0){
        return false;
    }
    // 控制star显示隐藏
    const mode = window.localStorage.getItem('mode');
    if((new Date().getHours() >= 7 && new Date().getHours() < 22) && mode === 'light'){
      window.localStorage.setItem('mode','light');
      canvasObj.style.display = "none";
      document.body.style.backgroundColor = "transparent";
      return false;
    } else {
      window.localStorage.setItem('mode','star');
      canvasObj.style.display = "block";
      document.body.className = "stars"
      document.body.style.backgroundColor = "rgba(26,26,26,1)";
      document.body.style.color = "#fff";
      setTimeout(() => {
        const gitmentContainer = document.getElementsByClassName("gitment-container");
        const gitmentEditorPreview = document.getElementsByClassName("gitment-editor-preview");
        const gitmentHeartIcon = document.getElementsByClassName("gitment-heart-icon");
        if(gitmentContainer.length > 0 && gitmentEditorPreview.length > 0 && gitmentHeartIcon.length > 0) {
            gitmentContainer[0].style.color = "#fff";
            gitmentContainer[1].style.color = "#fff";

            gitmentEditorPreview[0].style.backgroundColor = "#fff";
            gitmentHeartIcon[0].style.fill = "#fff";
        }
      }, 2000);
    }

    var threeD = function(param) {
      this.transIn = {};
      this.transOut = {};
      this.transIn.vtx = (param.vtx);
      this.transIn.sz = (param.sz);
      this.transIn.rot = (param.rot);
      this.transIn.pos = (param.pos);
    };

    threeD.prototype.vupd = function() {
      this.transOut = trans.steps(

        this.transIn.vtx,
        this.transIn.sz,
        this.transIn.rot,
        this.transIn.pos,
        cam.disp
      );
    };

    var Build = function() {
      this.vel = 0.04;
      this.lim = 360;
      this.diff = 200;
      this.initPos = 100;
      this.toX = _x;
      this.toY = _y;
      this.go();
    };

    Build.prototype.go = function() {
      this.canvas = document.getElementById("canv");
      this.canvas.width = window.innerWidth;
      this.canvas.height = window.innerHeight;
      this.$ = canv.getContext("2d");
      this.$.globalCompositeOperation = 'source-over';
      this.varr = [];
      this.dist = [];
      this.calc = [];

      for (var i = 0, len = num; i < len; i++) {
        this.add();
      }

      this.rotObj = {
        x: 0,
        y: 0,
        z: 0
      };
      this.objSz = {
        x: w / 5,
        y: h / 5,
        z: w / 5
      };
    };

    Build.prototype.add = function() {
      this.varr.push(new threeD({
        vtx: {
          x: rnd(),
          y: rnd(),
          z: rnd()
        },
        sz: {
          x: 0,
          y: 0,
          z: 0
        },
        rot: {
          x: 20,
          y: -20,
          z: 0
        },
        pos: {
          x: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
          y: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
          z: this.diff * Math.sin(360 * Math.random() * Math.PI / 180)
        }
      }));
      this.calc.push({
        x: 360 * Math.random(),
        y: 360 * Math.random(),
        z: 360 * Math.random()
      });
    };

    Build.prototype.upd = function() {
      cam.obj.x += (this.toX - cam.obj.x) * 0.05;
      cam.obj.y += (this.toY - cam.obj.y) * 0.05;
    };

    Build.prototype.draw = function() {
      this.$.clearRect(0, 0, this.canvas.width, this.canvas.height);
      cam.upd();
      this.rotObj.x += 0.1;
      this.rotObj.y += 0.1;
      this.rotObj.z += 0.1;

      for (var i = 0; i < this.varr.length; i++) {
        for (var val in this.calc[i]) {
          if (this.calc[i].hasOwnProperty(val)) {
            this.calc[i][val] += this.vel;
            if (this.calc[i][val] > this.lim) this.calc[i][val] = 0;
          }
        }

        this.varr[i].transIn.pos = {
          x: this.diff * Math.cos(this.calc[i].x * Math.PI / 180),
          y: this.diff * Math.sin(this.calc[i].y * Math.PI / 180),
          z: this.diff * Math.sin(this.calc[i].z * Math.PI / 180)
        };
        this.varr[i].transIn.rot = this.rotObj;
        this.varr[i].transIn.sz = this.objSz;
        this.varr[i].vupd();
        if (this.varr[i].transOut.p < 0) continue;
        var g = this.$.createRadialGradient(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p, this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2);
        this.$.globalCompositeOperation = 'lighter';
        g.addColorStop(0, 'hsla(255, 255%, 255%, 1)');
        g.addColorStop(.5, 'hsla(' + (i + 2) + ',85%, 40%,1)');
        g.addColorStop(1, 'hsla(' + (i) + ',85%, 40%,.5)');
        this.$.fillStyle = g;
        this.$.beginPath();
        this.$.arc(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2, 0, Math.PI * 2, false);
        this.$.fill();
        this.$.closePath();
      }
    };
    Build.prototype.anim = function() {
      window.requestAnimationFrame = (function() {
        return window.requestAnimationFrame ||
          function(callback, element) {
            window.setTimeout(callback, 1000 / 60);
          };
      })();
      var anim = function() {
        this.upd();
        this.draw();
        window.requestAnimationFrame(anim);
      }.bind(this);
      window.requestAnimationFrame(anim);
    };

    Build.prototype.run = function() {
      this.anim();

      window.addEventListener('mousemove', function(e) {
        this.toX = (e.clientX - this.canvas.width / 2) /-80;
        this.toY = (e.clientY - this.canvas.height / 2) /80;
      }.bind(this));
      window.addEventListener('touchmove', function(e) {
        e.preventDefault();
        this.toX = (e.touches[0].clientX - this.canvas.width / 2) /-80;
        this.toY = (e.touches[0].clientY - this.canvas.height / 2) /80;
      }.bind(this));
      window.addEventListener('mousedown', function(e) {
        for (var i = 0; i < 100; i++) {
          this.add();
        }
      }.bind(this));
      window.addEventListener('touchstart', function(e) {
        e.preventDefault();
        for (var i = 0; i < 100; i++) {
          this.add();
        }
      }.bind(this));
    };
    var app = new Build();
    app.run();
  })();
  
  window.addEventListener('resize', function() {
    canvasObj.width = w = window.innerWidth;
    canvasObj.height = h = window.innerHeight;
  }, false);
  
</script>

<style  type="text/css">
  body{
    text-align: -webkit-auto;
  }
  .stars div,.stars p,.stars ul,.stars li{
    color: #fff;
    filter:alpha(Opacity=90);
    -moz-opacity:0.98;
    opacity: 0.98; 
  }
  body hr{
    background-color: rgba(255,255,255,0.4);
    height: 1px;
    border: none;
  }
  #cnblogs_post_body p img{
    max-width: 100%;
  }
  #container {
    width: 90%;
    position: relative;
    background-color: rgba(0, 0, 0, 0);
  }
  #canv{
    position: fixed;
    display: none;
  }
  .cnblogs_code {
    color: #f8f8f8;
    background-color: rgba(245, 245, 245, 0);
    border: 1px solid #cccccc6e;
  }
  .cnblogs_code span{
    color: #ccc!important;
    background-color: #f5f5f500!important;
  }
  .cnblogs_code div {
    background-color: rgba(0, 0, 0, 0);
  }
  .cnblogs_code_toolbar a:link{
    background-color: #f5f5f500!important;
  }
  .cnblogs_code_toolbar a:link img{
    background-color:#f5f5f500!important;
  }
  div.commentform textarea.comment_textarea {
    background-color: #f0f8ff00;
  }
</style>
        <!-- background effects end -->
    

	<!-- Modified by Yu-Hsuan Yen -->
<!-- Post Header -->
<style type="text/css">
    header.intro-header{
        
            background-image: url('defaultHeaderBg.jpg')
            /*post*/
        
    }
    
    #signature{
        background-image: url('/img/signature/Just-do-it-white.png');
    }
    
</style>

<header class="intro-header" >
    <!-- Signature -->
    <div id="signature">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                
                    <div class="post-heading">
                        <div class="tags">
                            
                              <a class="tag" href="/tags/#dusign" title="dusign">dusign</a>
                            
                              <a class="tag" href="/tags/#hexo-theme-snail" title="hexo-theme-snail">hexo-theme-snail</a>
                            
                              <a class="tag" href="/tags/#snail" title="snail">snail</a>
                            
                              <a class="tag" href="/tags/#hexo" title="hexo">hexo</a>
                            
                        </div>
                        <h1>Hexo-Theme-Snail</h1>
                        <h2 class="subheading">A succinct hexo theme.</h2>
                        <span class="meta">
                            Posted by xiaopf on
                            2019-11-01
                        </span>

                        
                            <div class="blank_box"></div>
                            <span class="meta">
                                Words <span class="post-count">822</span> and
                                Reading Time <span class="post-count">4</span> Minutes
                            </span>
                            <div class="blank_box"></div>
                            <!-- 不蒜子统计 start -->
                            <span class="meta">
                                Viewed <span id="busuanzi_value_page_pv"><i class="fa fa-spinner fa-spin"></i></span> Times
                            </span>
                            <!-- 不蒜子统计 end -->
                        

                    </div>
                

                </div>
            </div>
        </div>      
    </div>
    <div class="waveWrapper">
        <div class="wave wave_before" style="background-image: url('/img/wave-top80.png')"></div>
        <div class="wave wave_after" style="background-image: url('/img/wave-top80.png')"></div>
    </div>
</header>

	
    <!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">xiaopf&#39;s site</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <!-- Known Issue, found by Hux:
            <nav>'s height woule be hold on by its content.
            so, when navbar scale out, the <nav> will cover tags.
            also mask any touch event of tags, unfortunately.
        -->
        <div id="huxblog_navbar">
            <div class="navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="/">Home</a>
                    </li>
                    

                        
                    

                        
                    

                        
                        <li>
                            <a href="/about/">About</a>
                        </li>
                        
                    

                        
                        <li>
                            <a href="/archive/">Archives</a>
                        </li>
                        
                    

                        
                        <li>
                            <a href="/tags/">Tags</a>
                        </li>
                        
                    
                    <li style="cursor: pointer;">
                        <p 
                            style="cursor: pointer;color:white;padding: 20px;margin:0;text-transform: uppercase;font-size: 12px;line-height: 20px;font-weight: 800;letter-spacing: 1px;"
                            id="changeMode"
                            title="change mode"
                            href="javascript:void(0)"
                        >
                            Mode
                        </p>
                    </li>
                </ul>
            </div>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>
<script>
    // Drop Bootstarp low-performance Navbar
    // Use customize navbar with high-quality material design animation
    // in high-perf jank-free CSS3 implementation
    const $body   = document.body;
    const $toggle = document.querySelector('.navbar-toggle');
    const $navbar = document.querySelector('#huxblog_navbar');
    const $collapse = document.querySelector('.navbar-collapse');
    const $changeMode = document.querySelector('#changeMode');

    $changeMode.addEventListener('click', handleChangeMode)
    $toggle.addEventListener('click', handleMagic)
    
    let mode = window.localStorage.getItem('mode');
    if(mode === 'light'){
        $changeMode.innerHTML='STAR'
    }else{
        $changeMode.innerHTML='LIGHT'
    }
    
    function handleChangeMode(e){
        let mode = window.localStorage.getItem('mode');
        if(!mode){
            if((new Date().getHours() >= 7 && new Date().getHours() < 22)){
                window.localStorage.setItem('mode','light');
            }else{
                window.localStorage.setItem('mode','star');
            }
        }else{
            if(mode==='star'){
                window.localStorage.setItem('mode','light');
            }else{
                window.localStorage.setItem('mode','star');
            }
        }
        window.location.reload()
    }
    function handleMagic(e){
        if ($navbar.className.indexOf('in') > 0) {
        // CLOSE
            $navbar.className = " ";
            // wait until animation end.
            setTimeout(function(){
                // prevent frequently toggle
                if($navbar.className.indexOf('in') < 0) {
                    $collapse.style.height = "0px"
                }
            },400)
        }else{
        // OPEN
            $collapse.style.height = "auto"
            $navbar.className += " in";
        }
    }
</script>


    <!-- Main Content -->
    <!-- Post Content -->
<article>
    <div class="container">
        <div class="row">

            <!-- Post Container -->
            <div class="
                col-lg-8 col-lg-offset-2
                col-md-10 col-md-offset-1
                post-container">

                <h1 id="hexo-theme-snail"><a href="#hexo-theme-snail" class="headerlink" title="hexo-theme-snail"></a>hexo-theme-snail</h1><p><a href="https://github.com/dusign/hexo-theme-snail" target="_blank" rel="noopener">View Hexo-Theme-Snail Sources On Github &#10174; </a></p>
<p><a href="https://www.dusign.net" target="_blank" rel="noopener">View Live Super Snail Blog &#10174;</a></p>
<p><img src="snail.png" alt="hexo-theme-snail"></p>
<p>Hexo-theme-snail is a succinct hexo theme. It has two colors, light and star, that can be set according to your own preferences in the settings, and also has the functions of sharing and commenting. More features are under development.</p>
<h2 id="Features"><a href="#Features" class="headerlink" title="Features"></a>Features</h2><ul>
<li>light color theme and star theme</li>
<li>diversified comment system</li>
<li>notice tips</li>
<li>share to other platforms (under development)</li>
<li>picture sharing (under development)</li>
</ul>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Install-Hexo"><a href="#Install-Hexo" class="headerlink" title="Install Hexo"></a>Install Hexo</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span></pre></td><td class="code"><pre><span class="line">$ npm install hexo-cli -g</span></pre></td></tr></table></figure>
<h3 id="Setup-your-blog"><a href="#Setup-your-blog" class="headerlink" title="Setup your blog"></a>Setup your blog</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span></pre></td><td class="code"><pre><span class="line">$ hexo init blog</span></pre></td></tr></table></figure>
<h3 id="Installation-Theme"><a href="#Installation-Theme" class="headerlink" title="Installation Theme"></a>Installation Theme</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span></pre></td><td class="code"><pre><span class="line">$ <span class="built_in">cd</span> blog</span></pre></td></tr><tr><td class="gutter"><pre><span class="line">2</span></pre></td><td class="code"><pre><span class="line">$ rm -rf <span class="built_in">source</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">3</span></pre></td><td class="code"><pre><span class="line">$ rm _config.yml package.json README.md LICENSE</span></pre></td></tr><tr><td class="gutter"><pre><span class="line">4</span></pre></td><td class="code"><pre><span class="line">$ git <span class="built_in">clone</span> https://github.com/dusign/hexo-theme-snail.git</span></pre></td></tr><tr><td class="gutter"><pre><span class="line">5</span></pre></td><td class="code"><pre><span class="line">$ mv ./hexo-theme-snail/snail ./themes</span></pre></td></tr><tr><td class="gutter"><pre><span class="line">6</span></pre></td><td class="code"><pre><span class="line">$ mv ./hexo-theme-snail/* ./</span></pre></td></tr><tr><td class="gutter"><pre><span class="line">7</span></pre></td><td class="code"><pre><span class="line">$ npm install</span></pre></td></tr></table></figure>
<h3 id="Set-Theme"><a href="#Set-Theme" class="headerlink" title="Set Theme"></a>Set Theme</h3><p>Modify the value of <code>theme:</code> in <code>_config.yml</code><br><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span></pre></td><td class="code"><pre><span class="line"><span class="comment"># Extensions</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">2</span></pre></td><td class="code"><pre><span class="line"><span class="comment">## Plugins: https://hexo.io/plugins/</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">3</span></pre></td><td class="code"><pre><span class="line"><span class="comment">## Themes: https://hexo.io/themes/</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">4</span></pre></td><td class="code"><pre><span class="line"><span class="attr">theme:</span> <span class="string">snail</span></span></pre></td></tr></table></figure></p>
<h3 id="Start-the-Server"><a href="#Start-the-Server" class="headerlink" title="Start the Server"></a>Start the Server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span></pre></td><td class="code"><pre><span class="line">$ hexo generate</span></pre></td></tr><tr><td class="gutter"><pre><span class="line">2</span></pre></td><td class="code"><pre><span class="line">$ hexo server</span></pre></td></tr></table></figure>
<h2 id="Configuration"><a href="#Configuration" class="headerlink" title="Configuration"></a>Configuration</h2><h3 id="Site"><a href="#Site" class="headerlink" title="Site"></a>Site</h3><p>Replace the following information with your own.<br><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span></pre></td><td class="code"><pre><span class="line"><span class="comment"># Site</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">2</span></pre></td><td class="code"><pre><span class="line"><span class="attr">title:</span> </span></pre></td></tr><tr><td class="gutter"><pre><span class="line">3</span></pre></td><td class="code"><pre><span class="line"><span class="attr">subtitle:</span> <span class="string">At</span> <span class="string">the</span> <span class="string">bottom</span> <span class="string">of</span> <span class="string">the</span> <span class="string">well,</span> <span class="string">it</span> <span class="string">is</span> <span class="string">destined</span> <span class="string">to</span> <span class="string">see</span> <span class="string">only</span> <span class="string">the</span> <span class="string">sky</span> <span class="string">at</span> <span class="string">the</span> <span class="string">wellhead.</span> </span></pre></td></tr><tr><td class="gutter"><pre><span class="line">4</span></pre></td><td class="code"><pre><span class="line">          <span class="string">However,</span> <span class="string">the</span> <span class="string">starting</span> <span class="string">point</span> <span class="string">only</span> <span class="string">affects</span> <span class="string">the</span> <span class="string">process</span> <span class="string">of</span> <span class="string">reaching</span> <span class="string">your</span> <span class="string">peak</span> <span class="string">and</span> <span class="string">does</span> <span class="string">not</span> <span class="string">determine</span> <span class="string">the</span> <span class="string">height</span> <span class="string">you</span> <span class="string">reach.</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">5</span></pre></td><td class="code"><pre><span class="line"><span class="attr">author:</span> <span class="string">Dusign</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">6</span></pre></td><td class="code"><pre><span class="line"><span class="attr">language:</span> <span class="string">en</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">7</span></pre></td><td class="code"><pre><span class="line"><span class="attr">timezone:</span></span></pre></td></tr></table></figure></p>
<h3 id="Site-Settings"><a href="#Site-Settings" class="headerlink" title="Site Settings"></a>Site Settings</h3><p>Put customized pictures in <code>img</code> directory.<br><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span></pre></td><td class="code"><pre><span class="line"><span class="comment"># Site settings</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">2</span></pre></td><td class="code"><pre><span class="line"><span class="attr">SEOTitle:</span> <span class="string">Hexo-theme-snail</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">3</span></pre></td><td class="code"><pre><span class="line"><span class="attr">email:</span> <span class="string">hexo-theme-snail@mail.com</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">4</span></pre></td><td class="code"><pre><span class="line"><span class="attr">description:</span> <span class="string">"A hexo theme"</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">5</span></pre></td><td class="code"><pre><span class="line"><span class="attr">keyword:</span> <span class="string">"dusign, hexo-theme-snail"</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">6</span></pre></td><td class="code"><pre><span class="line"><span class="attr">header-img:</span> <span class="string">img/header_img/home-bg-1-dark.jpg</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">7</span></pre></td><td class="code"><pre><span class="line"><span class="attr">signature:</span> <span class="literal">true</span> <span class="comment">#show signature</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">8</span></pre></td><td class="code"><pre><span class="line"><span class="attr">signature-img:</span> <span class="string">img/signature/Just-do-it-white.png</span></span></pre></td></tr></table></figure></p>
<h3 id="SNS-Settings"><a href="#SNS-Settings" class="headerlink" title="SNS Settings"></a>SNS Settings</h3><p>If you don’t want to display it, you can delete it directly.<br><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span></pre></td><td class="code"><pre><span class="line"><span class="comment"># SNS settings</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">2</span></pre></td><td class="code"><pre><span class="line"><span class="attr">github_username:</span>    <span class="string">dusign</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">3</span></pre></td><td class="code"><pre><span class="line"><span class="attr">twitter_username:</span>   <span class="string">dusignr</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">4</span></pre></td><td class="code"><pre><span class="line"><span class="attr">facebook_username:</span>  <span class="string">Gang</span> <span class="string">Du</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">5</span></pre></td><td class="code"><pre><span class="line"><span class="attr">zhihu_username:</span> <span class="string">dusignr</span></span></pre></td></tr></table></figure></p>
<h3 id="Sidebar-Settings"><a href="#Sidebar-Settings" class="headerlink" title="Sidebar Settings"></a>Sidebar Settings</h3><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span></pre></td><td class="code"><pre><span class="line"><span class="comment"># Sidebar Settings</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">2</span></pre></td><td class="code"><pre><span class="line"><span class="attr">sidebar:</span> <span class="literal">true</span>                      <span class="comment"># whether or not using Sidebar.</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">3</span></pre></td><td class="code"><pre><span class="line"><span class="attr">sidebar-about-description:</span> <span class="string">"Welcome to visit, I'm Dusign!"</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">4</span></pre></td><td class="code"><pre><span class="line"><span class="attr">sidebar-avatar:</span> <span class="string">img/header.jpg</span>    <span class="comment"># use absolute URL, seeing it's used in both `/` and `/about/`</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">5</span></pre></td><td class="code"><pre><span class="line"><span class="attr">widgets:</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">6</span></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> <span class="string">featured-tags</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">7</span></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> <span class="string">short-about</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">8</span></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> <span class="string">recent-posts</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">9</span></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> <span class="string">friends-blog</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">10</span></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> <span class="string">archive</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">11</span></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> <span class="string">category</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">12</span></pre></td><td class="code"><pre><span class="line"></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">13</span></pre></td><td class="code"><pre><span class="line"><span class="comment"># widget behavior</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">14</span></pre></td><td class="code"><pre><span class="line"><span class="comment">## Archive</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">15</span></pre></td><td class="code"><pre><span class="line"><span class="attr">archive_type:</span> <span class="string">'monthly'</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">16</span></pre></td><td class="code"><pre><span class="line"><span class="attr">show_count:</span> <span class="literal">true</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">17</span></pre></td><td class="code"><pre><span class="line"></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">18</span></pre></td><td class="code"><pre><span class="line"></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">19</span></pre></td><td class="code"><pre><span class="line"><span class="comment">## Featured Tags</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">20</span></pre></td><td class="code"><pre><span class="line"><span class="attr">featured-tags:</span> <span class="literal">true</span>                     <span class="comment"># whether or not using Feature-Tags</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">21</span></pre></td><td class="code"><pre><span class="line"><span class="attr">featured-condition-size:</span> <span class="number">1</span>              <span class="comment"># A tag will be featured if the size of it is more than this condition value</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">22</span></pre></td><td class="code"><pre><span class="line"></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">23</span></pre></td><td class="code"><pre><span class="line"></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">24</span></pre></td><td class="code"><pre><span class="line"><span class="comment">## Friends</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">25</span></pre></td><td class="code"><pre><span class="line"><span class="attr">friends:</span> <span class="string">[</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">26</span></pre></td><td class="code"><pre><span class="line">    <span class="string">&#123;</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">27</span></pre></td><td class="code"><pre><span class="line">        <span class="attr">title:</span> <span class="string">"Dusign's Blog"</span><span class="string">,</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">28</span></pre></td><td class="code"><pre><span class="line">        <span class="attr">href:</span> <span class="string">"https://blog.csdn.net/d_Nail"</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">29</span></pre></td><td class="code"><pre><span class="line">    <span class="string">&#125;,&#123;</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">30</span></pre></td><td class="code"><pre><span class="line">        <span class="attr">title:</span> <span class="string">"Dusign's Web"</span><span class="string">,</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">31</span></pre></td><td class="code"><pre><span class="line">        <span class="attr">href:</span> <span class="string">"#"</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">32</span></pre></td><td class="code"><pre><span class="line">    <span class="string">&#125;,&#123;</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">33</span></pre></td><td class="code"><pre><span class="line">        <span class="attr">title:</span> <span class="string">"Dusign's Github"</span><span class="string">,</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">34</span></pre></td><td class="code"><pre><span class="line">        <span class="attr">href:</span> <span class="string">"https://github.com/dusign"</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">35</span></pre></td><td class="code"><pre><span class="line">    <span class="string">&#125;,&#123;</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">36</span></pre></td><td class="code"><pre><span class="line">        <span class="attr">title:</span> <span class="string">"Other"</span><span class="string">,</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">37</span></pre></td><td class="code"><pre><span class="line">        <span class="attr">href:</span> <span class="string">"#"</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">38</span></pre></td><td class="code"><pre><span class="line">    <span class="string">&#125;</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">39</span></pre></td><td class="code"><pre><span class="line"><span class="string">]</span></span></pre></td></tr></table></figure>
<h3 id="Theme"><a href="#Theme" class="headerlink" title="Theme"></a>Theme</h3><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span></pre></td><td class="code"><pre><span class="line"><span class="comment"># Extensions</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">2</span></pre></td><td class="code"><pre><span class="line"><span class="comment">## Plugins: https://hexo.io/plugins/</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">3</span></pre></td><td class="code"><pre><span class="line"><span class="comment">## Themes: https://hexo.io/themes/</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">4</span></pre></td><td class="code"><pre><span class="line"><span class="attr">theme:</span> <span class="string">snail</span></span></pre></td></tr></table></figure>
<h3 id="Deployment"><a href="#Deployment" class="headerlink" title="Deployment"></a>Deployment</h3><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span></pre></td><td class="code"><pre><span class="line"><span class="comment"># Deployment</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">2</span></pre></td><td class="code"><pre><span class="line"><span class="comment">## Docs: https://hexo.io/docs/deployment.html</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">3</span></pre></td><td class="code"><pre><span class="line"><span class="attr">deploy:</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">4</span></pre></td><td class="code"><pre><span class="line">  <span class="attr">type:</span> <span class="string">git</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">5</span></pre></td><td class="code"><pre><span class="line">  <span class="attr">repo:</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">6</span></pre></td><td class="code"><pre><span class="line">      <span class="attr">github:</span> <span class="string">github.repository.address</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">7</span></pre></td><td class="code"><pre><span class="line">      <span class="attr">coding:</span> <span class="string">coding.repository.address</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">8</span></pre></td><td class="code"><pre><span class="line">  <span class="attr">branch:</span> <span class="string">master</span></span></pre></td></tr></table></figure>
<h3 id="Comment"><a href="#Comment" class="headerlink" title="Comment"></a>Comment</h3><p>See httpymls://github.com/imsun/gitment for detailed configuration method.<br><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span></pre></td><td class="code"><pre><span class="line"><span class="comment"># Comment</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">2</span></pre></td><td class="code"><pre><span class="line"><span class="comment">## This comment system is gitment</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">3</span></pre></td><td class="code"><pre><span class="line"><span class="comment">## gitment url: https://github.com/imsun/gitment</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">4</span></pre></td><td class="code"><pre><span class="line"><span class="attr">comment:</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">5</span></pre></td><td class="code"><pre><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">6</span></pre></td><td class="code"><pre><span class="line">  <span class="attr">owner:</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">7</span></pre></td><td class="code"><pre><span class="line">  <span class="attr">repo:</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">8</span></pre></td><td class="code"><pre><span class="line">  <span class="attr">client_id:</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">9</span></pre></td><td class="code"><pre><span class="line">  <span class="attr">client_secret:</span></span></pre></td></tr></table></figure></p>
<h3 id="Tip"><a href="#Tip" class="headerlink" title="Tip"></a>Tip</h3><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span></pre></td><td class="code"><pre><span class="line"><span class="comment"># Tip</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">2</span></pre></td><td class="code"><pre><span class="line"><span class="attr">tip:</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">3</span></pre></td><td class="code"><pre><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">4</span></pre></td><td class="code"><pre><span class="line">  <span class="attr">content:</span> <span class="string">欢迎访问</span> <span class="string">&lt;a</span> <span class="string">href="https://www.dusign.net"</span> <span class="string">target="dusign"&gt;dusign&lt;/a&gt;</span> <span class="string">的博客，博客系统一键分享的功能还在完善中，请大家耐心等待。</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">5</span></pre></td><td class="code"><pre><span class="line">          <span class="string">若有问题或者有好的建议欢迎留言，笔者看到之后会及时回复。</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">6</span></pre></td><td class="code"><pre><span class="line">          <span class="string">评论点赞需要github账号登录，如果没有账号的话请点击</span> </span></pre></td></tr><tr><td class="gutter"><pre><span class="line">7</span></pre></td><td class="code"><pre><span class="line">          <span class="string">&lt;a</span> <span class="string">href="https://github.com"</span> <span class="string">target="view_window"</span> <span class="string">&gt;</span> <span class="string">github</span> <span class="string">&lt;/a&gt;</span> <span class="string">注册，</span> <span class="string">谢谢</span> <span class="string">!</span></span></pre></td></tr></table></figure>
<h3 id="Color-Sheme"><a href="#Color-Sheme" class="headerlink" title="Color Sheme"></a>Color Sheme</h3><p>Set the <code>enable</code> value of the desired color sheme to <code>true</code>. If the value of <code>bg_effects.star.enable</code> is <code>true</code>, please modify the value of <code>highlight_theme</code> in <code>./themes/snail/_config.yml</code> to <code>night</code>.<br><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span></pre></td><td class="code"><pre><span class="line"><span class="comment"># Color Sheme</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">2</span></pre></td><td class="code"><pre><span class="line"><span class="comment">## If there is no effect after modification, please empty the cache and try again.</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">3</span></pre></td><td class="code"><pre><span class="line"><span class="comment">## ⚠️ The following special effects will take up a lot of cpu resorces, please open it carefully.</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">4</span></pre></td><td class="code"><pre><span class="line"><span class="attr">bg_effects:</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">5</span></pre></td><td class="code"><pre><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">6</span></pre></td><td class="code"><pre><span class="line">  <span class="attr">line:</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">7</span></pre></td><td class="code"><pre><span class="line">    <span class="attr">enable:</span> <span class="literal">false</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">8</span></pre></td><td class="code"><pre><span class="line">    <span class="attr">color:</span> <span class="number">129</span><span class="string">,200,61</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">9</span></pre></td><td class="code"><pre><span class="line">    <span class="attr">pointColor:</span> <span class="number">129</span><span class="string">,200,61</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">10</span></pre></td><td class="code"><pre><span class="line">    <span class="attr">opacity:</span> <span class="number">0.7</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">11</span></pre></td><td class="code"><pre><span class="line">    <span class="attr">zIndex:</span> <span class="number">-9</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">12</span></pre></td><td class="code"><pre><span class="line">    <span class="attr">count:</span> <span class="number">99</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">13</span></pre></td><td class="code"><pre><span class="line">  <span class="attr">mouse_click:</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">14</span></pre></td><td class="code"><pre><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">15</span></pre></td><td class="code"><pre><span class="line">    <span class="attr">content:</span> <span class="string">'"🌱","just do it","🌾","🍀","don'</span><span class="string">'t give up","🍂","🌻","try it again","🍃","never say die","🌵","🌿","🌴"'</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">16</span></pre></td><td class="code"><pre><span class="line">    <span class="attr">color:</span> <span class="string">'"rgb(121,93,179)"</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">17</span></pre></td><td class="code"><pre><span class="line"><span class="string">          ,"rgb(76,180,231)"</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">18</span></pre></td><td class="code"><pre><span class="line"><span class="string">          ,"rgb(184,90,154)"</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">19</span></pre></td><td class="code"><pre><span class="line"><span class="string">          ,"rgb(157,211,250)"</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">20</span></pre></td><td class="code"><pre><span class="line"><span class="string">          ,"rgb(255,0,0)"</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">21</span></pre></td><td class="code"><pre><span class="line"><span class="string">          ,"rgb(242,153,29)"</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">22</span></pre></td><td class="code"><pre><span class="line"><span class="string">          ,"rgb(23,204,16)"</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">23</span></pre></td><td class="code"><pre><span class="line"><span class="string">          ,"rgb(222,0,0)"</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">24</span></pre></td><td class="code"><pre><span class="line"><span class="string">          ,"rgb(22,36,92)"</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">25</span></pre></td><td class="code"><pre><span class="line"><span class="string">          ,"rgb(127,24,116)"</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">26</span></pre></td><td class="code"><pre><span class="line"><span class="string">          ,"rgb(119,195,79)"</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">27</span></pre></td><td class="code"><pre><span class="line"><span class="string">          ,"rgb(4,77,34)"</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">28</span></pre></td><td class="code"><pre><span class="line"><span class="string">          ,"rgb(122,2,60)"'</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">29</span></pre></td><td class="code"><pre><span class="line">  <span class="attr">star:</span></span></pre></td></tr><tr><td class="gutter"><pre><span class="line">30</span></pre></td><td class="code"><pre><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span></pre></td></tr></table></figure></p>
<h2 id="Releases"><a href="#Releases" class="headerlink" title="Releases"></a>Releases</h2><p>V1.0</p>
<ul>
<li>fix the bugs</li>
<li>add comment system</li>
<li>add notice tips</li>
<li>add star sheme</li>
</ul>
<h2 id="License"><a href="#License" class="headerlink" title="License"></a>License</h2><p>Apache License 2.0 Copyright(c) 2018-2020 <a href="https://github.com/dusign" target="_blank" rel="noopener">Dusign</a>   </p>
<p><a href="https://github.com/dusign/hexo-theme-snail" target="_blank" rel="noopener">hexo-theme-snail</a> is derived from <a href="https://github.com/Huxpro/huxpro.github.io" target="_blank" rel="noopener">Huxpro</a> Apache License 2.0. Copyright (c) 2015-2020 Huxpro</p>

                
                <hr>
                <!-- Pager -->
                <ul class="pager">
                    
                        <li class="previous">
                            <a href="/2019/12/06/hexo-build-github-pages/" data-toggle="tooltip" data-placement="top" title="Hexo快速搭建个人博客，并发布到github pages">&larr; Previous Post</a>
                        </li>
                    
                    
                </ul>

                <div class="comment_notes_blank"></div>

                <!-- tip start -->
                
                <div class="visitor_notice">
                    <img 
                        src="/img/notice.png" 
                        alt="notice"
                        title="notice"/>
                    <p class="notice">
                        欢迎访问 <a href="https://xiaopf.github.io/" target="xiaopf">xiaopf</a> 的博客, 若有问题或者有好的建议欢迎留言，笔者看到之后会及时回复。 评论点赞需要github账号登录，如果没有账号的话请点击 <a href="https://github.com" target="view_window" > github </a> 注册， 谢谢 !
                    </p>
                </div>
                <div class="comment_notes">
                    <p>
                        If you like this blog or find it useful for you, you are welcome to comment on it. 
                        You are also welcome to share this blog, so that more people can participate in it.
                        If the images used in the blog infringe your copyright, please contact the author to delete them. Thank you !
                    </p>
                </div>
                
                <!-- tip end -->

                <!--分享-->
                
                <!--分享-->

                <!-- require APlayer start --><!--
                
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css">
                <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js"></script>
                <script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script>

                <div class="aplayer"
                    data-id=""
                    data-server=""
                    data-type=""
                    data-fixed="" >
                </div>
                -->
                <!-- require APlayer end -->

                <!-- gitment start -->
                
                <hr>
                <div id="blog_comments"></div>

<!--
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
-->
<!--
<link rel="stylesheet" href="/css/gitment.css">
<script type="text/javascript" src="/js/gitment.js"></script>
-->

<script src="https://cdn.jsdelivr.net/gh/theme-next/theme-next-gitment@1/gitment.browser.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theme-next/theme-next-gitment@1/default.css"/>

<!--
<link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
<script src="https://billts.site/js/gitment.js"></script>
-->

<script>
const myTheme = {
  render(state, instance) {
    const container = document.createElement('div')
    container.lang = "en-US"
    container.className = 'gitment-container gitment-root-container'
    
     // your custom component
    container.appendChild(instance.renderSomething(state, instance))
    
    container.appendChild(instance.renderHeader(state, instance))
    container.appendChild(instance.renderComments(state, instance))
    container.appendChild(instance.renderEditor(state, instance))
    //container.appendChild(instance.renderFooter(state, instance))
    return container
  },
  renderSomething(state, instance) {
    const container = document.createElement('div')
    container.lang = "en-US"
    container.className = 'hello_visitor'
    if (state.user.login) {
      container.innerText = `Hello ${state.user.login}, Welcome to comment system`
    }
    return container
  }
}


const gitment = new Gitment({
    id: 'Fri Nov 01 2019 22:02:12 GMT+0800', // optional
    owner: "xiaopf",
    repo: "xiaopf.github.io",
    oauth: {
      client_id: "cdef4a51db6a777a079b",
      client_secret: "7a1ff9334134ea02a901d0da92e6ee283068d19a",
    },
    theme: myTheme,
    // ...
    // For more available options, check out the documentation below
  })
  
  gitment.render('blog_comments')
  // or
  // gitment.render(document.getElementById('comments'))
  // or
  // document.body.appendChild(gitment.render())

  setTimeout(() => {
      let loginBtn = document.querySelector('.gitment-editor-login-link');
      if(!loginBtn){
        return false;
      }
      loginBtn.addEventListener('click',(e) => {
        window.localStorage.setItem('loginAnchor',1)
      })
  }, 2000);
  const loginAnchor = window.localStorage.getItem('loginAnchor')
  if(loginAnchor === '1'){
      const container = document.createElement('a');
      const e = document.createEvent("MouseEvents");   
      e.initEvent("click", true, true);
      container.href="#footer";
      container.dispatchEvent(e);
      window.localStorage.setItem('loginAnchor',0)
  }
</script>
                
                <!-- gitment end -->

                <!-- 来必力City版安装代码 -->
                
                <!-- City版安装代码已完成 -->

                <!-- disqus comment start -->
                
                <!-- disqus comment end -->
            </div>
            
            <!-- Tabe of Content -->
            <!-- Table of Contents -->

    
      <aside id="sidebar">
        <div id="toc" class="toc-article">
        <strong class="toc-title">Contents</strong>
        
          <ol class="toc-nav"><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#hexo-theme-snail"><span class="toc-nav-number">1.</span> <span class="toc-nav-text">hexo-theme-snail</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#Features"><span class="toc-nav-number">1.1.</span> <span class="toc-nav-text">Features</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#Quick-Start"><span class="toc-nav-number">1.2.</span> <span class="toc-nav-text">Quick Start</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#Install-Hexo"><span class="toc-nav-number">1.2.1.</span> <span class="toc-nav-text">Install Hexo</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#Setup-your-blog"><span class="toc-nav-number">1.2.2.</span> <span class="toc-nav-text">Setup your blog</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#Installation-Theme"><span class="toc-nav-number">1.2.3.</span> <span class="toc-nav-text">Installation Theme</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#Set-Theme"><span class="toc-nav-number">1.2.4.</span> <span class="toc-nav-text">Set Theme</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#Start-the-Server"><span class="toc-nav-number">1.2.5.</span> <span class="toc-nav-text">Start the Server</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#Configuration"><span class="toc-nav-number">1.3.</span> <span class="toc-nav-text">Configuration</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#Site"><span class="toc-nav-number">1.3.1.</span> <span class="toc-nav-text">Site</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#Site-Settings"><span class="toc-nav-number">1.3.2.</span> <span class="toc-nav-text">Site Settings</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#SNS-Settings"><span class="toc-nav-number">1.3.3.</span> <span class="toc-nav-text">SNS Settings</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#Sidebar-Settings"><span class="toc-nav-number">1.3.4.</span> <span class="toc-nav-text">Sidebar Settings</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#Theme"><span class="toc-nav-number">1.3.5.</span> <span class="toc-nav-text">Theme</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#Deployment"><span class="toc-nav-number">1.3.6.</span> <span class="toc-nav-text">Deployment</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#Comment"><span class="toc-nav-number">1.3.7.</span> <span class="toc-nav-text">Comment</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#Tip"><span class="toc-nav-number">1.3.8.</span> <span class="toc-nav-text">Tip</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#Color-Sheme"><span class="toc-nav-number">1.3.9.</span> <span class="toc-nav-text">Color Sheme</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#Releases"><span class="toc-nav-number">1.4.</span> <span class="toc-nav-text">Releases</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#License"><span class="toc-nav-number">1.5.</span> <span class="toc-nav-text">License</span></a></li></ol></li></ol>
        
        </div>
      </aside>
    

                
            <!-- Sidebar Container -->
            <div class="
                col-lg-8 col-lg-offset-2
                col-md-10 col-md-offset-1
                sidebar-container">

                <!-- Featured Tags -->
                
                <section>
                    <!-- no hr -->
                    <h5><a href="/tags/">FEATURED TAGS</a></h5>
                    <div class="tags">
                       
                          <a class="tag" href="/tags/#dusign" title="dusign">dusign</a>
                        
                          <a class="tag" href="/tags/#hexo-theme-snail" title="hexo-theme-snail">hexo-theme-snail</a>
                        
                          <a class="tag" href="/tags/#snail" title="snail">snail</a>
                        
                          <a class="tag" href="/tags/#hexo" title="hexo">hexo</a>
                        
                    </div>
                </section>
                

                <!-- Friends Blog -->
                
                <hr>
                <h5>FRIENDS</h5>
                <ul class="list-inline">

                    
                        <li><a href="https://xiaopf.github.io" target="_blank">xiaopf&#39;s Blog</a></li>
                    
                        <li><a href="https://github.com/xiaopf" target="_blank">xiaopf&#39;s Github</a></li>
                    
                        <li><a href="#" target="_blank">Other</a></li>
                    
                </ul>
                
            </div>
        </div>
    </div>
</article>




<!-- async load function -->
<script>
    function async(u, c) {
      var d = document, t = 'script',
          o = d.createElement(t),
          s = d.getElementsByTagName(t)[0];
      o.src = u;
      if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
      s.parentNode.insertBefore(o, s);
    }
</script>
<!-- anchor-js, Doc:http://bryanbraun.github.io/anchorjs/ -->
<script>
    async("https://cdn.bootcss.com/anchor-js/1.1.1/anchor.min.js",function(){
        anchors.options = {
          visible: 'hover',
          placement: 'left',
          icon: 'ℬ'
        };
        anchors.add().remove('.intro-header h1').remove('.subheading').remove('.sidebar-container h5');
    })
</script>
<!-- star 模式通过时间控制 -->

<style  type="text/css">
    .notice {
        color:rgba(51,51,51,0.9);
        margin:0px;
        padding:0px;
    }

    .visitor_notice a {
        text-decoration:none;
        color:rgba(51,51,51,0.9);
        font-weight:normal;
        font-style:italic;
    }

    .visitor_notice a:hover {
        text-decoration:none;
        color:rgba(51,51,51,0.9);
        font-weight:bolder;
        font-style:italic;
    }

    .stars .notice {
        color:white;
        margin:0px;
        padding:0px;
    }

    .stars .visitor_notice a {
        text-decoration:none;
        color:rgba(255,255,255,0.9);
        font-weight:normal;
        font-style:italic;
    }

    .stars .visitor_notice a:hover {
        text-decoration:none;
        color:rgba(255,255,255,0.9);
        font-weight:bolder;
        font-style:italic;
    }
</style>

<style  type="text/css">
    /* place left on bigger screen */
    @media all and (min-width: 800px) {
        .anchorjs-link{
            position: absolute;
            left: -0.75em;
            font-size: 1.1em;
            margin-top : -0.1em;
        }

        .comment_notes_blank {
            height:100px;
        }
        
        .comment_notes {
            color:rgba(51,51,51,0.9);
            text-align:left;
            font-style:italic;
        }

        .visitor_notice {
            border:1px solid rgba(209,216,220,0.9);
            padding:20px 20px 20px 20px;
            border-radius:10px;
        }

        .visitor_notice img{
            height:40px;
            width:40px;
            float:left;
            position:relative;
            margin:0px 10px 0px 0px;
            padding:0px;
            top:0px;
            left:0px;
        }
    }

    .comment_notes_blank {
        height:100px;
    }
    
    .comment_notes {
        color:rgba(51,51,51,0.9);
        text-align:left;
        font-style:italic;
    }

    .visitor_notice {
        border:1px solid rgba(209,216,220,0.9);
        padding:20px 20px 20px 20px;
        border-radius:10px;
    }

    .visitor_notice img{
        height:40px;
        width:40px;
        float:left;
        position:relative;
        margin:0px 10px 0px 0px;
        padding:0px;
        top:0px;
        left:0px;
    }

</style>



    <!-- Footer -->
    <!-- Footer -->
<footer id="footer">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <ul class="list-inline text-center">

                
                    <li>
                        <a target="_blank"  href="https://github.com/xiaopf">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                

                
                    <li>
                        <a target="_blank" href="https://twitter.com/perfect_shaw">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                

                
                    <li>
                        <a target="_blank" href="https://www.instagram.com/perfect__shaw">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                

                
                    <li>
                        <a target="_blank" href="https://www.zhihu.com/people/pf-xiao">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa  fa-stack-1x fa-inverse">知</i>
                            </span>
                        </a>
                    </li>
                

                

                

                

                </ul>
                <p class="copyright text-muted">
                    Copyright &copy; xiaopf 2019 
                    <br>
                    Powered by 
                    <a href="https://github.com/dusign/hexo-theme-snail" target="_blank" rel="noopener">
                        <i>hexo-theme-snail</i>
                    </a> | 
                    <iframe style="margin-left: 2px; margin-bottom:-5px;" frameborder="0" scrolling="0"
                        width="100px" height="20px"
                        src="https://ghbtns.com/github-btn.html?user=dusign&repo=hexo-theme-snail&type=star&count=true">
                    </iframe>
                </p>
            </div>
        </div>
    </div>

</footer>

<!-- jQuery -->
<script src="/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="/js/bootstrap.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="/js/hux-blog.min.js"></script>

<!-- Search -->
<script src="/js/search.js"></script>

<!-- async load function -->
<script>
    function async(u, c) {
      var d = document, t = 'script',
          o = d.createElement(t),
          s = d.getElementsByTagName(t)[0];
      o.src = u;
      if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
      s.parentNode.insertBefore(o, s);
    }
</script>


<!-- jquery.tagcloud.js -->
<script>
    // only load tagcloud.js in tag.html
    if($('#tag_cloud').length !== 0){
        async("https://xiaopf.github.io/js/jquery.tagcloud.js",function(){
            $.fn.tagcloud.defaults = {
                //size: {start: 1, end: 1, unit: 'em'},
                color: {start: '#bbbbee', end: '#0085a1'},
            };
            $('#tag_cloud a').tagcloud();
        })
    }
</script>

<!--fastClick.js -->
<script>
    async("https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js", function(){
        var $nav = document.querySelector("nav");
        if($nav) FastClick.attach($nav);
    })
</script>


<!-- Google Analytics -->


<script>
    // dynamic User by Hux
    var _gaId = 'UA-154429678-1';
    var _gaDomain = 'https://xiaopf.github.io/';

    // Originial
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', _gaId, _gaDomain);
    ga('send', 'pageview');
</script>




<!-- Baidu Tongji -->


<!-- Search -->

    <script type="text/javascript">      
        var search_path = "search.xml";
        if (search_path.length == 0) {
            search_path = "search.xml";
        }
    var path = "/" + search_path;
    searchFunc(path, 'local-search-input', 'local-search-result');
    </script>


<!-- busuanzi -->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>





	<a id="rocket" href="#top" class=""></a>
	<script type="text/javascript" src="/js/totop.js?v=1.0.0" async=""></script>
    <script type="text/javascript" src="/js/toc.js?v=1.0.0" async=""></script>

    
        <!-- background effects start -->
        

        
            <script type="text/javascript" src="/js/mouse-click.js" content='[&#34;🌱&#34;,&#34;just do it&#34;,&#34;🌾&#34;,&#34;🍀&#34;,&#34;don&#39;t give up&#34;,&#34;🍂&#34;,&#34;🌻&#34;,&#34;try it again&#34;,&#34;🍃&#34;,&#34;never say die&#34;,&#34;🌵&#34;,&#34;🌿&#34;,&#34;🌴&#34;]' color='[&#34;rgb(121,93,179)&#34; ,&#34;rgb(76,180,231)&#34; ,&#34;rgb(184,90,154)&#34; ,&#34;rgb(157,211,250)&#34; ,&#34;rgb(255,0,0)&#34; ,&#34;rgb(242,153,29)&#34; ,&#34;rgb(23,204,16)&#34; ,&#34;rgb(222,0,0)&#34; ,&#34;rgb(22,36,92)&#34; ,&#34;rgb(127,24,116)&#34; ,&#34;rgb(119,195,79)&#34; ,&#34;rgb(4,77,34)&#34; ,&#34;rgb(122,2,60)&#34;]'></script>
        

        <!-- background effects end -->
    

</body>

</html>
